<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect"
  >
    <template v-for="(item, index) in topMenus">
      <!-- 有子菜单的项 -->
      <el-submenu :style="{'--theme': theme}" :index="item.path" :key="index" v-if="item.children && item.children.length > 0 && index < visibleNumber">
        <template slot="title">
          <svg-icon
          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
          :icon-class="item.meta.icon"/>
          {{ item.meta.title }}
        </template>
        <template v-for="(child, childIndex) in item.children">
          <el-menu-item
            :index="child.path"
            :key="childIndex"
            v-if="!child.hidden">
            <svg-icon
              v-if="child.meta && child.meta.icon && child.meta.icon !== '#'"
              :icon-class="child.meta.icon"/>
            {{ child.meta.title }}
          </el-menu-item>
        </template>
      </el-submenu>
      
      <!-- 无子菜单的项 -->
      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-else-if="index < visibleNumber">
        <svg-icon
        v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
        :icon-class="item.meta.icon"/>
        {{ item.meta.title }}
      </el-menu-item>
    </template>

    <!-- 顶部菜单超出数量折叠 -->
    <el-submenu :style="{'--theme': theme}" index="more" :key="visibleNumber" v-if="topMenus.length > visibleNumber">
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <!-- 有子菜单的项 -->
        <el-submenu :index="item.path" :key="index" v-if="item.children && item.children.length > 0 && index >= visibleNumber">
          <template slot="title">
            <svg-icon
            v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
            :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </template>
          <template v-for="(child, childIndex) in item.children">
            <el-menu-item
              :index="child.path"
              :key="childIndex"
              v-if="!child.hidden">
              <svg-icon
                v-if="child.meta && child.meta.icon && child.meta.icon !== '#'"
                :icon-class="child.meta.icon"/>
              {{ child.meta.title }}
            </el-menu-item>
          </template>
        </el-submenu>
        
        <!-- 无子菜单的项 -->
        <el-menu-item
          :index="item.path"
          :key="index"
          v-else-if="index >= visibleNumber">
          <svg-icon
            v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
            :icon-class="item.meta.icon"/>
          {{ item.meta.title }}
        </el-menu-item>
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>
import { constantRoutes } from "@/router"
import { isHttp } from "@/utils/validate"

// 隐藏侧边栏路由
const hideList = ['/index', '/user/profile']

export default {
  data() {
    return {
      // 顶部栏初始数
      visibleNumber: 5,
      // 当前激活菜单的 index
      currentIndex: undefined
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    },
    // 顶部显示菜单
    topMenus() {
      let topMenus = []
      this.routers.map((menu) => {
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === '/' && menu.children) {
            topMenus.push(menu.children[0])
          } else {
            topMenus.push(menu)
          }
        }
      })
      return topMenus
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters
    },
    // 设置子路由
    childrenMenus() {
      var childrenMenus = []
      this.routers.map((router) => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if(router.path === "/") {
              router.children[item].path = "/" + router.children[item].path
            } else {
              if(!isHttp(router.children[item].path)) {
                router.children[item].path = router.path + "/" + router.children[item].path
              }
            }
            router.children[item].parentPath = router.path
          }
          childrenMenus.push(router.children[item])
        }
      })
      return constantRoutes.concat(childrenMenus)
    },
    // 默认激活的菜单
    activeMenu() {
      const path = this.$route.path
      let activePath = path
      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
        const tmpPath = path.substring(1, path.length)
        if (!this.$route.meta.link) {
          activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
        }
      }
      // 确保侧边栏始终隐藏
      this.$store.dispatch('app/toggleSideBarHide', true)
      return activePath
    },
  },
  beforeMount() {
    window.addEventListener('resize', this.setVisibleNumber)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setVisibleNumber)
  },
  mounted() {
    this.setVisibleNumber()
  },
  methods: {
    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.body.getBoundingClientRect().width / 3
      this.visibleNumber = parseInt(width / 85)
    },
    // 菜单选择事件
    handleSelect(key, keyPath) {
      this.currentIndex = key
      
      if (isHttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank")
      } else {
        // 直接导航到选中的路由
        const routeMenu = this.childrenMenus.find(item => item.path === key)
        if (routeMenu && routeMenu.query) {
          let query = JSON.parse(routeMenu.query)
          this.$router.push({ path: key, query: query })
        } else {
          this.$router.push({ path: key })
        }
        // 确保侧边栏始终隐藏
        this.$store.dispatch('app/toggleSideBarHide', true)
      }
    }
  },
}
</script>

<style lang="scss">
.topmenu-container.el-menu--horizontal {
  border-bottom: none !important;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  background-color: #fff;
  padding: 0 20px;
  
  > .el-menu-item {
    float: left;
    height: 50px !important;
    line-height: 50px !important;
    color: #5a5e66 !important;
    padding: 0 15px !important;
    margin: 0 5px !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    
    &:hover {
      background-color: rgba(64, 158, 255, 0.1) !important;
      color: #409EFF !important;
      transform: translateY(-2px);
    }
    
    &.is-active {
      background-color: rgba(64, 158, 255, 0.15) !important;
      color: #409EFF !important;
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background-color: #409EFF;
        border-radius: 3px 3px 0 0;
      }
    }
    
    .svg-icon {
      margin-right: 5px;
      font-size: 16px;
    }
  }
  
  > .el-submenu {
    .el-submenu__title {
      float: left;
      height: 50px !important;
      line-height: 50px !important;
      color: #5a5e66 !important;
      padding: 0 15px !important;
      margin: 0 5px !important;
      border-radius: 6px;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: rgba(64, 158, 255, 0.1) !important;
        color: #409EFF !important;
        transform: translateY(-2px);
      }
      
      .svg-icon {
        margin-right: 5px;
        font-size: 16px;
      }
    }
    
    &.is-active {
      .el-submenu__title {
        background-color: rgba(64, 158, 255, 0.15) !important;
        color: #409EFF !important;
        font-weight: 500;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 30px;
          height: 3px;
          background-color: #409EFF;
          border-radius: 3px 3px 0 0;
        }
      }
    }
    
    .el-menu {
      background-color: #fff;
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      padding: 8px 0;
      margin-top: 5px;
      min-width: 180px;
      
      .el-menu-item {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        color: #5a5e66;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: rgba(64, 158, 255, 0.1) !important;
          color: #409EFF !important;
        }
        
        &.is-active {
          background-color: rgba(64, 158, 255, 0.15) !important;
          color: #409EFF !important;
        }
        
        .svg-icon {
          margin-right: 8px;
          font-size: 14px;
        }
      }
      
      // 嵌套子菜单样式
      .el-submenu {
        .el-submenu__title {
          height: 40px;
          line-height: 40px;
          padding: 0 20px;
          color: #5a5e66;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: rgba(64, 158, 255, 0.1) !important;
            color: #409EFF !important;
          }
          
          .svg-icon {
            margin-right: 8px;
            font-size: 14px;
          }
        }
        
        .el-menu {
          position: absolute;
          left: 100%;
          top: 0;
          margin-top: 0;
          margin-left: 5px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .topmenu-container.el-menu--horizontal {
    > .el-menu-item {
      padding: 0 10px !important;
      margin: 0 2px !important;
      font-size: 13px;
    }
    
    > .el-submenu {
      .el-submenu__title {
        padding: 0 10px !important;
        margin: 0 2px !important;
        font-size: 13px;
      }
    }
  }
}
</style>
